<template>
  <div class="produ-nav">
    <el-row>
      <el-col v-show="item.bIsShow" :key="index" v-for="(item, index) in navList" style="width: auto;">
        <div class="nav-item tab-over"
          :class="navType==item.type?'is-active':''"
          @click.stop="click2Nav($event, item.type)">

          <el-badge :value="item.num" class="nav-item-num" type="primary">
            {{item.text}}
          </el-badge>

        </div>
      </el-col>

      <el-col :span="4" style="float: right; min-width: 200px;">
        <el-input
          size="small"
          style="line-height: 54px; padding-right: 73px;"
          placeholder="请输入关键词↵"
          v-model="searchKey"
          @change="search4ProduByKey">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navType: 0,
      // navList: [  // DEMO
      //   {
      //     index: 1,
      //     type: 0,
      //     span: 3,
      //     text: '全部',
      //     num: 6
      //   }
      // ]
      searchKey: '',
    }
  },
  props: {
    navList: Array
  },
  methods: {
    click2Nav(el, type) {
      this.navType = type;
      this.$emit('navClick', type);
    },
    search4ProduByKey() {
      this.$emit('search', this.searchKey);
    },
  }
}
</script>

<style lang="scss">
  /***********my-produ-nav************/
  .produ-nav{
    border-bottom: 1px solid #EDEFF2;

    .nav-item{
      padding: 8px 13px 0 13px;
      line-height: 44px;
      margin: 0 17px;
      min-width: 70px;

      font-size: 14px;
      color: #43475C;
      text-align: center;
      border-bottom: 2px solid transparent;
      cursor: pointer;

      .nav-item-num {
        .el-badge__content {
          top: 10px !important;
          right: 5px !important;
          background: rgba(64, 158, 255, .7);
        }
      }
    }

    .is-active{
      color: #127BFF;
      border-bottom: 2px solid #127BFF;
    }
  }
</style>
